<template>
	<view>

		<!-- 404页面 -->
		<view class="noData" v-if="netWorkType == 'none'">
			<noData @handle="refresh"></noData>
		</view>
		
		<view style="width:100%;" v-if="netWorkType != 'none'">
			<view class="list">
				<view class="text-box step">
					<view class="tit">填写信息</view>
					<view class="iconfont text">&#xe626;</view>
				</view>
				<view  class="text-box step">
					<view class="tit">医生开方</view>
					<view class="iconfont">&#xe626;</view>
				</view>
				<view  class="text-box">
					<view class="tit">下单支付</view>
					<view class="iconfont">&#xe626;</view>
				</view>
				<view  class="text-box">
					<view class="tit">等待收货</view>
				</view>
			</view>
			<!-- 头部结束 -->
			<scroll-view  id="content" :scroll-into-view="toView"  :scroll-top="scrollTop" scroll-y="true" class="scroll-Y content"
				@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll"   >
				<view class="center-box">
					<!-- 消息列  用药人信息（）3 ，电子处方 4，用户消息 1，医生消息2   -->
					<!-- 消息类型  普通消息，产品消息，图片消息 ... -->
					<view class="title-box padding-all24">
						<text class="iconfont">&#xe62b;</text>医生需要详细了解您的病情后才能开方 请不要离开此页
					</view>
					<view v-for="item in messageList">
						<view class="use-drug-box padding-all24" v-if="item.message_type ==3" >
							<view class="item-title">
								用药人信息
							</view>
							<view class="user ">
								<view class="item-user padding-top16 padding-bottom16">
									<span class="temp">姓名：</span> <span class="text margin-right10">{{item.name}} </span>&nbsp;&nbsp;&nbsp;&nbsp;
									<span class="temp">性别：</span><span class="text .margin-right10">{{item.sex ==1?'男':'女'}} </span> 
									<span class="temp">年龄：</span><span class="text">{{item.age}} </span> 
								</view>
								<view class="bingshi padding-top16 padding-bottom16" >
									<span class="temp">疾病史：</span> <span class="text">无疾病史/非哺乳期</span>
								</view>
							</view>
							<view class=" padding-top16 padding-bottom16">
								<span class="temp">疾病描述：</span><span class="text">{{item.bingzheng}}</span>
							</view>
							<view class="drug-remark padding-top16 padding-bottom16">
								<span class="temp">药品需求：</span><span class="text">{{item.product_name}} </span>
							</view>
							<view class="footer-tip padding-top16 padding-bottom16">
								<view>
									<text class="iconfont">&#xe62a;</text>
								</view>
								<view class="text">
									确认已线下就诊，使用过所购买的药品无过敏以及不良反应，当前病情稳定 
								</view>
								
							</view>
							
						</view>
						<view class="use-drug-box padding-all24" v-if="item.message_type ==4" >
							<view class="item-title">
								电子处方
							</view>
							<view class="user ">
								<view class="item-user padding-top16 padding-bottom16">
									<span class="temp">姓名：</span> <span class="text .margin-right10">{{item.name}} </span>
									<span class="temp">性别：</span><span class="text .margin-right10">{{item.sex ==1?'男':'女'}} </span> 
									<span class="temp">年龄：</span><span class="text">{{item.age}} </span> 
								</view>
								<view class="bingshi padding-top16 padding-bottom16" >
									<span class="temp">开方时间：</span> <span class="text">{{item.create_time}}</span>
								</view>
							</view>
							<view class="user ">
								<view class="title padding-top16 padding-bottom16">
										{{item.product_name}}
								</view>
							
								<view class="temp padding-top16 padding-bottom16">
									{{item.remark}}
								</view>
							</view>
							
							<view class="footer-tip padding-top16 padding-bottom16">
								
								<view class="txt" @tap="drugPng(item.biz_url_png)">
									点击查看原始处方单
								</view>
								
							</view>
							
						</view>
						
						
						<view class="message-box" v-if="item.message_type==2||item.message_type==1">
							<!-- 消息 72 536 72 -->
							<view class="head-src" >
								<!--医生  -->
								<image v-if="item.type==2" src="http://app.aiouning.com/uploader/upload/202303/20/202303200950176417bbd9f263d.png" mode=""></image>
							</view>
							<view class="message" :class="item.type==1?'item-right':''" > 
								<view class="item-message" v-if="item.message_type ==1"  >
									<!-- 普通 -->
									{{item.message}}
								</view>
								<view  v-if="item.message_type ==2" class="image" >
									<!-- 图片信息 -->
									<image :src="item.message" mode="aspectFit"></image>
								</view>
								
							
							</view>
							<view class="head-src" >
								<!-- 用户 -->
								<image v-if="item.type==1" :src="data.userInfo.avatar" mode="" ></image>
							</view>
						</view> 
						
					</view>
					
					
					
				</view>
				
			</scroll-view>
			
			<view class="btn ">
				<view class='btn-item'>
					<view class="hfdoctor btn-temp" v-if="btn_type==2" @tap.stop="changeType(1)">回复医生</view>
					<view class="topay btn-temp" @tap.stop="changeType(2)"  v-else >结算</view>
				</view>
				<view v-if="btn_type==2" class="pay" @tap="toPay">
					去结算
				</view>
				<view v-if="btn_type==1" class="input-info">
					<view class="">
						<input type="text"  v-model="sendmessge">
						
					</view>	
					<view class="text">
						<text v-if="sendmessge" class="send" @tap="sendMsg">发送</text>
						<text class="iconfont" v-else >&#xe62f;</text>
						
					</view>
					
				</view>
			</view>
			
		</view>
		
		<uni-popup ref="bizUrlPng" type="center" custom="true" >
			<view class="bizUrlPng">
				<view class="content">
					<image :src="biz_url_png" mode="aspectFit" @tap="bigPic()"></image>
				</view>
				
				<view class="btn-box">
					<view class="btn-close btn-size" @tap="$refs.bizUrlPng.close()">确认</view>
					<!-- <view class="btn-qr btn-size" @tap="submitAward">确认</view> -->
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	//公共api接口封装方法
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import store from '@/store/index.js';
	//获取网络状态
	import {
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				isSelect: false,
				//网络状态
				networkStatus: true,
				//接口数据
				data: {
					addressList: [],
					product:[],
					userInfo:[],
					demandId:'',//问诊号
				},
				
				patient_id:'',//用药人
				norms_value_id:'',//产品规格id
				checkLebal:'',//病症
				chiefComplaint:'',//主诉
				guoMinDetail:'无',//过敏史
				problemHistory:'无',//既往病史
				medicationHistory:'无',//用药史
				familyHistory:'无',//家庭病史
				liverFunction:'正常',//肝
				renalFunction:'正常',//肾
				payType:'自费',
				product:'[{"id":"139","norms_value_id":171,"num":1,"store_id":33,"store_name":"瓯宁","price":"69.00"}]',//产品信息 
				sendmessge:'',
				sendTime:'',
				btn_type:2,//按钮 1发送消息  2去结算
				//  消息列  用药人信息（）3 ，电子处方 4，用户消息 1，医生消息2  
				
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				messageId:'',
				biz_url_png:'http://test.open.gzch120.com/open/file/2023/4/6/1092775986296290135.png',
				messageList:[
					{
						message_type:3,
						name:'张三',
						sex:1,
						age:24,
						bingshi:2,//1有病2没病 可点击查看详细信息
						sub:{
							// 用药人病史
						},
						bingzheng:'痤疮',
						product_name:'特维丝 异维A酸软胶囊 10mg*24粒/盒 x1 ',//产品
						
						
						
					},
					{
						message_type:1,
						type:1,
						src:'http://app.aiouning.com/uploader/upload/202303/20/202303200950176417bbd9f263d.png',//头像，
						message:'医生你好，以上是我的信息，请帮我开方',
						message_type:1, //1普通消息 2图片消息
						
					},
					{
						message_type:1,
						type:2,
						src:'http://app.aiouning.com/uploader/upload/202303/20/202303200950176417bbd9f263d.png',//头像，
						message:'请稍等，正在针对您的病症及用药为你开具处方，请不要离开',
						message_type:1, //1普通消息 2图片消息
						
					},
					
					// {
					// 	type:2,
					// 	src:'http://app.aiouning.com/uploader/upload/202303/20/202303200950176417bbd9f263d.png',//头像，
					// 	message:'111',
					// 	message_type:1, //1普通消息 2图片消息
					// },
					// {
					// 	type:1,
					// 	src:'http://app.aiouning.com/uploader/upload/202303/20/202303200950176417bbd9f263d.png',//头像，
					// 	message:'http://app.aiouning.com/uploader/upload/202303/20/202303200950176417bbd9f263d.png',
					// 	message_type:2, //1普通消息 2图片消息
					// },
					// {
					// 	type:1,
					// 	src:'http://app.aiouning.com/uploader/upload/202303/20/202303200950176417bbd9f263d.png',//头像，
					// 	message:'111',
					// 	message_type:1, //1普通消息 2图片消息
					// },
					// {
					// 	type:4,
					// 	name:'张三',
					// 	sex:1,
					// 	age:24,
					// 	bingshi:2,//1有病2没病 可点击查看详细信息
					// 	src:'',//原始处方图
					// 	bingzheng:'痤疮',
					// 	product_name:'特维丝 异维A酸软胶囊 10mg*24粒/盒 x1',//产品
					// 	remark:'一天3次，每次1',
					// 	create_time:'2023-3-20 15:15:15'
						
						
					// },
					// {
					// 	type:2,
					// 	src:'http://app.aiouning.com/uploader/upload/202303/20/202303200950176417bbd9f263d.png',//头像，
					// 	message:'请严格按处方和药品说明书使用，严禁超量超范围使用，如用药过程中出现病情变化或其他不适症状，请立即停药并及时就医',
					// 	message_type:1, //1普通消息 2图片消息
					// },
					
				],
				
			};
		},
		
		components: {
			uniPopup
		},
		computed: {
			//注册网络状态
			...mapGetters(['netWorkType','loginStatus'])
		},
		onShow() {
			let _this = this
			this.getList()
			//测试使用
			// _this.sendTime = setInterval(() => {
			// 	console.log('sendTime轮询---')
			// 	_this.getMsg();
			// }, 10000) 
		},
		onUnload(){
			console.log('关闭轮询')
			clearInterval(this.sendTime); //关闭轮询
			this.sendTime = '';
		},
		onLoad(e) {
			// 产品信息
			if(typeof e.product !='undefined'){
				this.product = e.product ;
				// 测试
				this.product='[{"id":"139","norms_value_id":171,"num":1,"store_id":33,"store_name":"瓯宁","price":"69.00"}]'
			}
			// 用药人 和 病史信息
			if(typeof e.patient_id !='undefined'){
				this.patient_id = e.patient_id ;
			}
			if(typeof e.norms_value_id !='undefined'){
				this.norms_value_id = e.norms_value_id ;
			}
			if(typeof e.checkLebal !='undefined'){
				this.checkLebal = e.checkLebal ;
			}
			if(typeof e.chiefComplaint !='undefined'){
				this.chiefComplaint = e.chiefComplaint ;
			}
			if(typeof e.guoMinDetail !='undefined'){
				this.guoMinDetail = e.guoMinDetail ;
			}
			if(typeof e.problemHistory !='undefined'){
				this.problemHistory = e.problemHistory ;
			}
			if(typeof e.medicationHistory !='undefined'){
				this.medicationHistory = e.medicationHistory ;
			}
			
			if(typeof e.familyHistory !='undefined'){
				this.familyHistory = e.familyHistory ;
			}
			if(typeof e.liverFunction !='undefined'){
				this.liverFunction = e.liverFunction ;
			}
			if(typeof e.renalFunction !='undefined'){
				this.renalFunction = e.renalFunction ;
			}
			if(typeof e.payType !='undefined'){
				this.payType = e.payType ;
			}
			
			
		},
		methods: {
			// 刷新的方法
			refresh() {
				this.getList()
			},
			upper(e) {
				console.log(23232323)
			},
			lower: function(e) {
				console.log('滚动到底部',e)
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			drugPng(src){
				// 查看电子处方
				let _this = this
				_this.biz_url_png =src
				// uni.previewImage({
				// 	urls:[_this.biz_url_png],
					
				// })
				// 查看大图 取消时可能会刷新页面
				
				_this.$refs.bizUrlPng.open()
			},
			bigPic(){
				let _this = this
				// uni.previewImage({
				// 	urls:[_this.biz_url_png],
					
				// })
			},
			changeType(type){
				this.btn_type =type
			},
			getList() {
				//初始常用地址
				const _this = this
				//console.log(66)				
				var opt = {
					url: '/Inquiry/getDemandId',
					data:{
						patient_id:_this.patient_id,//用药人
						norms_value_id:_this.norms_value_id||171,//产品规格id
						checkLebal:_this.checkLebal,//病症
						chiefComplaint:_this.chiefComplaint,//主诉
						guoMinDetail:this.guoMinDetail,//过敏史
						problemHistory:this.problemHistory,//既往病史
						medicationHistory:this.medicationHistory,//用药史
						familyHistory:this.familyHistory ,//家庭病史
						liverFunction:this.liverFunction,//肝
						renalFunction:this.renalFunction,//肾
						payType:'自费',
					},
					success: function(res) {
						//console.log(res)
						if (res.status == 1) {
							_this.data.product = res.data.product
							_this.data.userInfo = res.data.userInfo
							_this.data.demandId=res.data.demandId
							
							_this.messageList=[
								{
									message_type:3,
									type:1,
									name:_this.data.userInfo.name,
									sex:_this.data.userInfo.sex,
									age:_this.data.userInfo.age,
									bingshi:_this.data.userInfo.bingshi,//1有病2没病 可点击查看详细信息
									sub:{
										// chiefComplaint:,//主诉
										guoMinDetail:this.guoMinDetail,//过敏史
										problemHistory:this.problemHistory,//既往病史
										medicationHistory:this.medicationHistory,//用药史
										familyHistory:this.familyHistory ,//家庭病史
										liverFunction:this.liverFunction,//肝
										renalFunction:this.renalFunction,//肾
									},
									bingzheng:_this.chiefComplaint,
									product_name:_this.data.product.name,//产品
									
										
								},
								{
									message_type:1,
									type:1,
									src:'http://app.aiouning.com/uploader/upload/202303/20/202303200950176417bbd9f263d.png',//头像，
									message:'医生你好，以上是我的信息，请帮我开方',
									message_type:1, //1普通消息 2图片消息
									avatar:_this.data.userInfo.avatar
									
								},	
								{
									message_type:1,
									type:2,
									src:'http://app.aiouning.com/uploader/upload/202303/20/202303200950176417bbd9f263d.png',//头像，
									message:'请稍等，正在针对您的病症及用药为你开具处方，请不要离开',
									message_type:1, //1普通消息 2图片消息
									
								}
								
								
							]
							
							_this.sendTime = setInterval(() => {
								console.log('sendTime轮询---')
								_this.getMsg();
							}, 10000) 
							
							
							// _this.data.addressList = res.data.list
							//console.log(_this.data.goods)
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message
							});
						}

					}
				};
				_this.$service.GetApi(opt)


			},
			getMsg(){
				const _this = this
				//console.log(66)				
				var opt = {
					url: '/Inquiry/getMsg',
					data:{
						// patient_id:_this.patient_id,//用药人
						demand_id:_this.data.demandId|| 789,//问诊号
						id:_this.messageId||''
					},
					success: function(res) {
						//console.log(res)
						
						if (res.status == 1) {
							_this.messageId =res.data.id
							let i = 0
							res.data.list.forEach(function(item){
								// {
								// 	type:4,
								// 	name:'张三',
								// 	sex:1,
								// 	age:24,
								// 	bingshi:2,//1有病2没病 可点击查看详细信息
								// 	src:'',//原始处方图
								// 	bingzheng:'痤疮',
								// 	product_name:'特维丝 异维A酸软胶囊 10mg*24粒/盒 x1',//产品
								// 	remark:'一天3次，每次1',
								// 	create_time:'2023-3-20 15:15:15'
									
									
								// },
								
								if(item.message_type == 4){
									item.name=_this.data.userInfo.name
									item.sex=_this.data.userInfo.sex
									item.age=_this.data.userInfo.age
									item.bingshi=_this.data.userInfo.bingshi
									item.bingzheng=_this.chiefComplaint
									item.product_name=_this.data.product.name//产品
									
									item.remark=item.message
									// item.create_time='2023-3-20 15:15:15'
									
										
									
								}
								_this.messageList.push(item)
								i =1
							})
							if(i){
								_this.pageScrollToBottom();
							}
							// uni.pageScrollTo({
							// 	scrollTop:2000000,
							// 	duration:0
							// })
						
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message
							});
						}
				
					}
				};
				_this.$service.GetApi(opt)
			},
			sendMsg(){
				const _this = this
				clearInterval(this.sendTime); //关闭轮询
				_this.sendTime = '';
				//console.log(66)				
				var opt = {
					url: '/Inquiry/sendMsg', 
					data:{
						patient_id:_this.patient_id,//用药人
						demandId:_this.data.demandId||789,//问诊号
						message:_this.sendmessge
						
					},
					success: function(res) {
						//console.log(res)
						if (res.status == 1) {
							let msg =  {
										type:1,
										src:'',//头像，
										message:_this.sendmessge,
										message_type:1, //1普通消息 2图片消息
									}
							_this.messageId = res.data.id
							_this.messageList.push(msg)
							_this.sendmessge = ''
							_this.pageScrollToBottom();
							// uni.pageScrollTo({
							// 	scrollTop:30000000000,
							// 	duration:0
							// })
							_this.sendTime = setInterval(() => {
								console.log('sendTime轮询---')
								_this.getMsg();
							}, 10000) 
							// _this.getMsg()
							
							
							
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message
							});
						}
				
					}
				};
				_this.$service.GetApi(opt)
			},
			pageScrollToBottom: function() {
				let _this = this;
				uni.createSelectorQuery().select('#content').boundingClientRect(function(rect) {
					
					uni.pageScrollTo({
						scrollTop: rect.height+50,
						duration:0
					});
				}).exec()
			},
			queryConsul(){
				const _this = this
				//console.log(66)				
				var opt = {
					url: '/Inquiry/queryConsul',
					data:{
						patient_id:_this.patient_id,//用药人
						demandId:_this.data.demandId//问诊号
					},
					success: function(res) {
						//console.log(res)
						if (res.status == 1) {
						
							
						
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message
							});
						}
				
					}
				};
				_this.$service.GetApi(opt)
			},
			toPay(){
				const _this = this
				// uni.navigateTo({
				// 	url: "./edit/edit?type=add"
				// })
				console.log(_this.product)
				_this.$refer.setVilit('/pages/PayOrder/submit_order')
				let callback = function(url) {
					_this.$refs.popupvLogin.open()
				}
				var data = {
					product:_this.product,
					demandId:_this.data.demandId||'1091668881766120274'
				}
				_this.$refer.toUrl(callback, data)
			},
			toAddPage() {
				const _this = this
				// uni.navigateTo({
				// 	url: "./edit/edit?type=add"
				// })
				_this.$refer.setVilit('/pages/address/add/add')
				let callback = function(url) {
					_this.$refs.popupvLogin.open()
				}
				var data = {
					type: 'add'
				}
				_this.$refer.toUrl(callback, data)
			},
			
		}
	}
</script>

<style lang="scss">
	@import "./index.scss";
</style>
